<template>
	<!-- 图片预览和下载 -->
	<view class="black">
		<!-- src="http://122.152.205.72:88/superhero/MARVEL/Venom/cover.jpg" 
		开启长按图片显示识别小程序码菜单  @longpress
		-->
		<image :src="cover" class="cover" mode="widthFix" @longpress="operator"></image>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				cover: "" //存值接收到的图片
			}
		},
		// 页面加载的时候就回调
		onLoad() {
			var cover = params.cover; //取出点击详情页面的图片路径
			this.cover = cover;

			// 通过api修改导航栏的属性 
			uni.setNavigationBarColor({
				frontColor: "#ffffff",
				backgroundColor: "#000000"
			});
		},
		methods: {
			// 长按图片显示操作菜单进行下载
			operator() {
				var me = this;
				// 显示操作菜单
				uni.showActionSheet({
					itemList: ["保存图片到本地"], //按钮的文字数组
					success: function(res) {
						// 下标为0则下载
						if (res.tapIndex == 0) {   //用户点击的按钮，从上到下的顺序，从0开始
							// console.log("进入下载。。。");
							uni.showLoading({
								title: "图片保存中..."
							})//长按下载
							uni.downloadFile({ //下载文件资源到本地，客户端直接发起一个 HTTP GET 请求，返回文件的本地临时路径。
								url: me.cover, //下载资源的 url
								success: function(result) {
									var tempFilePath = result.tempFilePath; //成功返回的参数 临时文件路径，下载后的文件会存储到一个临时文件
									// console.log(tempFilePath);
									uni.saveImageToPhotosAlbum({  //保存图片到系统相册。 下载成功后就保存到手机
										filePath: tempFilePath, //图片文件路径 不支持网络图片
										success: function() {
											uni.showToast({
												title: "保存成功",
												duration: 2000
											})
										},
										complete: function() {  //成功还是失败都会调用的这个回调函数
											uni.hideLoading();
										}
									})
								}
							})
						}
					}
				})
			}
		}
	}
</script>


<style>
	.black {
		background-color: #000000;
		width: 100%;
		height: 100%;

		display: flex;
		flex-direction: column;
		justify-content: center;
		position: fixed;
	}

	.cover {
		align-self: center;
	}
</style>
